<template>
  <div>
    <div class="title-tip">{{ item.name }}---{{ item.typeCode }}</div>
    <!-- <span class="goback" @click="goBack">返回</span> -->
    <!-- RA题型 -->

    <div class="desc" v-if="item.typeCode == 'RA'">
      {{ item.content }}
    </div>

    <!-- <div class="lmcs" v-if="item.url !== ''">
        <Audioplayer :url="item.url"></Audioplayer>
      </div> -->

    <!-- MCS -->
    <div v-if="item.typeCode == 'MCS'">
      <div class="desc" v-if="item.content !== ''">
        <span>{{ item.content }}</span>
      </div>
      <div class="lmcs" v-if="item.url">
        <Audioplayer :url="item.url"></Audioplayer>
      </div>

      <div class="radio">
        <div class="descb">
          {{ item.describe }}
        </div>
        <el-form>
          <el-radio-group v-model="checkedRadio">
            <el-radio
              size="medium"
              disabled
              v-for="(item, index) in radio"
              :key="index"
              :label="index + 1"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </el-form>
      </div>
    </div>

    <!-- MCM -->
    <div class="mul" v-if="item.typeCode == 'MCM'">
      <div class="desc" v-if="item.content !== ''">
        <span>{{ item.content }}</span>
      </div>
      <div class="lmcs" v-if="item.url">
        <Audioplayer :url="item.url"></Audioplayer>
      </div>

      <el-form>
        <div class="descb">
          {{ item.describe }}
        </div>
        <el-checkbox-group v-model="checkedList" size="medium">
          <el-checkbox
            disabled
            v-for="(item, index) in checkList"
            :key="index"
            :label="index + 1"
          >
            <span ref="options">{{ item }}</span>
          </el-checkbox>
        </el-checkbox-group>
      </el-form>
    </div>

    <!-- RP -->
    <div class="h480" v-if="item.typeCode == 'RP'">
      <div class="test_wrapper" v-if="dataList.length > 0">
        <transition-group class="transition-wrapper" name="sort">
          <div v-for="(item, index) in dataList" :key="index" class="sort-item">
            <span>{{ index + 1 }}</span>
            {{ item }}
          </div>
        </transition-group>
      </div>

      <div class="answer">
        <div
          v-for="(item, index) in item.answer.split('')"
          class="item"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>

    <!-- FIBR 阅读填空 -->
    <div class="desc" v-if="item.typeCode == 'FIBRW'">
      <span v-for="(item1, index) in fibrContent" :key="index">
        {{ item1 }}
        <span class="blks" v-if="index < fibrContent.length - 1"
          ><span v-for="(item2, i2) in item.answer?item.answer.split(','):''" :key="i2"
            ><span v-if="i2 == index">{{ item2 }}</span></span
          ></span
        >
      </span>
    </div>
    <!-- <div v-if="item.typeCode == 'FIBRW'" class="fibr">
      <span
        class="answer-item"
        v-for="(item, index) in item.option.split('&@#')"
        :key="index"
        >{{ item }}</span
      >
    </div> -->
    <!-- FIB 听力填空 -->
    <div class="desc" v-if="item.typeCode == 'FIB'">
      <span v-for="(item1, index) in fibContent" :key="index">
        {{ item1 }}
        <span class="blks" v-if="index < fibContent.length - 1"
          ><span v-for="(item2, i2) in  item.answer?item.answer.split(','):''" :key="i2"
            ><span v-if="i2 == index">{{ item2 }}</span></span
          ></span
        >
      </span>
    </div>
    <div v-if="item.typeCode == 'FIB'" class="fibr">
      <span
        class="answer-item"
        v-for="(item, index) in item.option?item.option.split('&@#'):''"
        :key="index"
        >{{ item }}</span
      >
    </div>

    <!-- HCS -->
    <div v-if="item.typeCode == 'HCS'" class="hcs">
      <div class="player">
        <Audioplayer :url="item.url"></Audioplayer>
      </div>
      <!-- 多项选择 -->
      <div class="radio">
        <div class="descb">{{ item.describe }}</div>
        <div class="title">
          {{ item.content }}
        </div>
        <el-form>
          <el-radio-group v-model="checkedRadio">
            <span v-for="(item, index) in radio" :key="index">
              <el-radio size="medium" :label="+index + 1" disabled
                ><span ref="options">{{ item }}</span></el-radio
              >
            </span>
          </el-radio-group>
        </el-form>
      </div>
    </div>

    <!-- SWT总结短文 -->
    <div class="desc" v-if="item.typeCode == 'SWT'">
      {{ item.content }}
    </div>
    <div v-if="item.typeCode == 'SWT'" class="swt-answer">
      {{ item.answer }}
    </div>

    <!-- HIW 识别错词 -->
    <div class="desc" v-if="item.typeCode == 'HIW'">
      {{ item.content }}
    </div>

    <!-- WE 写作 -->
    <div class="desc" v-if="item.typeCode == 'WE'">
      {{ item.content }}
    </div>
    <div class="we" v-if="item.typeCode == 'WE'">
      {{ item.answer }}
    </div>

    <!-- SST录音总结 -->
    <div class="sst" v-if="item.typeCode == 'SST'">
      <Audioplayer :url="item.url"></Audioplayer>
    </div>
    <div class="swt-answer" v-if="item.typeCode == 'SST'">
      {{ item.answer }}
    </div>

    <!-- RS重复句子 -->
    <div class="sst" v-if="item.typeCode == 'RS'">
      <Audioplayer :url="item.url"></Audioplayer>
    </div>

    <!-- RL复述讲座 -->
    <div class="sst" v-if="item.typeCode == 'RL'">
      <Audioplayer :url="item.url"></Audioplayer>
    </div>

    <!-- ASQ短问答 -->
    <div class="sst" v-if="item.typeCode == 'ASQ'">
      <Audioplayer :url="item.url"></Audioplayer>
    </div>

    <!-- DI描述图片 -->
    <div class="di" v-if="item.typeCode == 'DI'">
      <img :src="item.url" class="di-pic" />
    </div>

    <!-- WFD 听写句子 -->
    <div class="sst" v-if="item.typeCode == 'WFD'">
      <Audioplayer :url="item.url"></Audioplayer>
    </div>
    <div v-if="item.typeCode == 'WFD' && item.answer" class="swt-answer">
      {{ item.answer }}
    </div>

    <!-- SMW 选择缺少单词 -->
    <div class="smw" v-if="item.typeCode == 'SMW'">
      <Audioplayer :url="item.url"></Audioplayer>
    </div>
    <div class="radio smw-content" v-if="item.typeCode == 'SMW'">
      <div class="content">{{ item.content }}</div>
      <el-form>
        <el-radio-group v-model="checkedRadio">
          <span v-for="(item, index) in radio" :key="index">
            <el-radio size="medium" :label="+index + 1" disabled
              ><span ref="options">{{ item }}</span></el-radio
            >
          </span>
        </el-radio-group>
      </el-form>
    </div>

    <!-- FIBR 阅读填空 -->
    <div class="fib" v-if="item.typeCode == 'FIBR'">
      <Audioplayer :url="item.url" v-if="item.typeCode == 'FIBR'"></Audioplayer>
    </div>
    <div class="fib-content" v-if="item.typeCode == 'FIBR'">
      <span v-for="(item1, index1) in fibContent" :key="index1">
        {{ item1 }}
        <span class="blks" v-if="index1 < fibContent.length - 1">
          <span
            class="item"
            v-for="(item3, index3) in item.answer?item.answer.split(','):''"
            :key="index3"
          >
            <span v-if="index3 == index1" class="item1">{{ item3 }}</span>
          </span>
        </span>
      </span>
    </div>
    <!-- <div v-if="item.typeCode == 'FIBR'" class="fibr">
      <span
        class="answer-item"
        v-for="(item2, index2) in item.option.split('&@#')"
        :key="index2"
        >{{ item2 }}</span
      >
    </div> -->

    <!-- RA 朗读句子 -->
    <div
      class="raplayer"
      v-if="
        item.typeCode == 'RA' ||
        item.typeCode == 'DI' ||
        item.typeCode == 'ASQ' ||
        item.typeCode == 'RS' ||
        item.typeCode == 'RL'
      "
    >
      <div class="container">
        <Aplayer :url="item.answer"></Aplayer>
      </div>
    </div>
  </div>
</template>

<script>
import Audioplayer from '../../myhomework/audioplayer'
import Aplayer from '../../../practice/exercise/aplayer/index'
export default {
  props: ['item', 'fibContent', 'content'],
  components: {
    Audioplayer,
    Aplayer
  },
  data () {
    return {
      checkList: [],
      checkedList: [], // 选中列表
      radio: [],
      checkedRadio: '',
      oldData: null, // 开始排序时按住的旧数据
      newData: null, // 拖拽过程的数据
      dataList: [],
      fibrContent: [],
      // fibContent: [],
    }
  },
  created () {
    switch (this.item.typeCode) {
      case 'MCM':
        this.checkList = this.item.option.split('&@#')
        this.checkedList = this.item.answer.split(',').map(Number)
        break;

      case 'MCS':
        this.checkedRadio = +this.item.answer
        break;

      case 'HCS':
        this.checkedRadio = +this.item.answer
        break;

      case 'RP':
        this.dataList = this.item.option.split('&@#')
        break;

      case 'SMW':
        this.radio = this.item.option.split('&@#')
        break;
    }
    // if (this.item.typeCode == 'MCM') {
    //   this.checkList = this.item.option.split('&@#')
    //   this.checkedList = this.item.answer.split(',').map(Number)
    // }
    // if (this.item.typeCode == 'MCS' || 'HCS') {
    //   // this.radio = this.item.option.split('&@#')
    //   this.checkedRadio = +this.item.answer
    // }
    // if (this.item.typeCode == 'RP') {
    //   this.dataList = this.item.option.split('&@#')
    // }
    this.fibrContent = this.item.content.split('(PARAM)')
    // this.fibContent = this.item.content.split('(PARAM)')


    // if (this.item.typeCode == 'SMW') {
    //   this.radio = this.item.option.split('&@#')
    // }

  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },

    dragstart (value) {
      this.oldData = value
    },
    // 记录移动过程中信息
    dragenter (value, e) {
      this.newData = value
      e.preventDefault()
    },
    // 拖拽最终操作
    dragend (value, e) {
      if (this.oldData !== this.newData) {
        const oldIndex = this.dataList.indexOf(this.oldData)
        const newIndex = this.dataList.indexOf(this.newData)
        const newItems = [...this.dataList]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData)
        this.dataList = [...newItems]
        // console.log(this.dataList);
        let answer = ''
        for (var i = 0; i < this.dataList.length; i++) {
          answer += this.dataList[i].id
        }
        console.log(answer);
        this.answer = answer
        this.$emit('sendAnswer', this.answer)
      }
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover (e) {
      e.preventDefault()
    },

  },

}
</script>

<style lang="less" scoped>
.title-tip {
  margin-top: 1rem;
  position: relative;
}
.swt-answer {
  margin-top: 2rem;
  background-color: #eee;
  padding: 1rem;
  border: 1px dashed #aaa;
}
.answer {
  margin: 1rem 0;
  margin-top: 3rem;
  .item {
    display: inline-block;
    width: 1.875rem;
    height: 2rem;
    background-color: #eee;
    color: #333;
    vertical-align: middle;
    // border-radius: 0px 0.75rem 0.75rem 0px;
    font-size: 1.25rem;
    line-height: 2rem;
    padding-left: 0.375rem;
  }
}
.descb {
  font-weight: bold;
  margin: 1rem 0;
}
.we {
  background-color: #eee;
  margin: 1rem 0;
  padding: 1rem;
}
.raplayer {
  margin: 2rem 0;
  .container {
    width: 25rem;
    margin: auto;
  }
}
.el-radio {
  width: 54rem;
}
.di {
  background: #fffafa;
  border: 1px dotted #ff5e4e;
  // padding: 1.875rem;
  font-size: 1.125rem;
  color: #333;
  line-height: 2rem;
  margin-top: 1.25rem;
  .di-pic {
    width: 100%;
  }
}
.lmcs {
  background: #fffafa;
  border: 1px dotted #ff5e4e;
  // padding: 1.875rem;
  font-size: 1.125rem;
  color: #333;
  line-height: 2rem;
  margin-top: 1.25rem;
}
.sst {
  background: #fffafa;
  border: 1px dotted #ff5e4e;
  // padding: 1.875rem;
  font-size: 1.125rem;
  color: #333;
  line-height: 2rem;
  margin-top: 1.25rem;
}
.blks {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  display: inline-block;
  width: 7.5rem;
  height: 1.875rem;
  line-height: 1.5rem;
  left: 1.875rem;
  text-align: center;
  vertical-align: middle;
  background-color: #eee;
  color: #999;
  .item {
    vertical-align: middle;
    //  height: 1.875rem;
    //  display: inline-block;
  }
}
.desc {
  background: #fffafa;
  border: 1px dotted #ff5e4e;
  padding: 1.875rem;
  font-size: 1.125rem;
  color: #333;
  line-height: 2rem;
  margin-top: 1.25rem;
  word-break: break-word;
}

.fib,
.smw {
  background: #fffafa;
  border: 1px dotted #ff5e4e;
  // padding: 1.875rem;
  font-size: 1.125rem;
  color: #333;
  line-height: 2rem;
  margin-top: 1.25rem;
}
.smw-content {
  background-color: #f7f7f7;
  margin-top: 2rem;
  .content {
    padding: 1rem;
    font-weight: bold;
  }
}
.fib-content {
  // padding: 2rem;
  font-size: 1.125rem;
  color: #666;
  line-height: 3.125rem;
  margin-top: 1rem;
}
.fibr {
  margin-top: 1.875rem;
  padding: 0 1.875rem;
}
.answer-item {
  background-color: #ff5e4e;
  margin-right: 0.5rem;
  padding: 0.5rem 0.6rem;
  color: #fff;
  font-size: 1.125rem;
  border-radius: 0.2875rem;
  cursor: pointer;
}
.hcs {
  .descb {
    font-weight: bold;
  }
  .player {
    background: #fffafa;
    border: 1px dotted #ff5e4e;
    font-size: 1.125rem;
    color: #333;
    line-height: 2rem;
    margin-top: 1.25rem;
  }
  .el-radio {
    width: 54rem;
  }
}
.sort-move {
  transition: transform 0.3s;
}
// .sort-item:hover {
//   // background-color: pink;
// }
.sort-item {
  background-color: #fff;
  margin-top: 1.375rem;
  // cursor: move;
  span {
    display: inline-block;
    width: 1.875rem;
    height: 1.5rem;
    background-color: #ff5e4e;
    color: #fff;
    vertical-align: middle;
    border-radius: 0px 0.75rem 0.75rem 0px;
    font-size: 1.25rem;
    line-height: 1.5rem;
    padding-left: 0.375rem;
  }
}
// 单选
.radio {
  .el-radio {
    margin-left: 1rem;
    white-space: pre-wrap;
    line-height: 2.1875rem;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner {
    background-color: #ff5e4e;
    border-color: #ff5e4e;
  }
  /deep/.el-radio__input.is-checked + .el-radio__label {
    color: #666;
    width: 70rem;
  }
  /deep/.el-radio__label {
    font-size: 1.125rem;
  }
  /deep/.el-radio-group {
    width: 70rem;
  }
}
.el-checkbox {
  margin-top: 1.875rem;
  display: block !important;
  margin-left: 1rem;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #666;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #ff5e4e;
  border-color: #ff5e4e;
}

.goback {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 8px;
  background-color: #ff5e4e;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
</style>